import React, { useEffect } from 'react'
import { WapNav, Search } from '@react-vant/icons';
import { Swiper, Image, Grid,Sticky  } from 'react-vant';
import request from "../../../api/request";
import { useDispatch, useSelector } from "react-redux"
import "../../../api/data"
import * as Action from "../../../actions/index"
import { ALLSTATE, IMGSTYPE } from "../../../types/store"
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch } from 'redux';
import {useNavigate} from "react-router-dom";
import Hoclogin from "../../../utils/Hoclogin"
function Index() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  useEffect(() => {
    request.get("/api/swipers").then(res => {
      dispatch(Action.get_swiper(res.data.swipers))
    })
    
  }, [])
  useEffect(()=>{
    request.get("/api/list").then(res => {
      dispatch(Action.get_list(res.data.list))
    })
  },[])
  const imgsArr = useSelector((state: ALLSTATE) => {
    return state.imgsArr;
  })
  const listArr = useSelector((state: ALLSTATE) => {
    return state.listArr;
  })
  return (
    <div className="index">
      <Sticky >
      <header>
        <WapNav />
        <p><Search /><input type="text" placeholder="百雀羚套装" /></p>
        <b>登录</b>
      </header>
      </Sticky>
      <div className="demo-swiper">
        <Swiper autoplay={2000} enabled loop >
          {
            imgsArr && imgsArr.map((item, index) => {
              return <Swiper.Item key={index}>
                <Grid border={false} columnNum={4}>
                  {
                    item.con.map((item, index) => {
                      return <Grid.Item key={index}>
                        <Image src={item.img} />
                        <p>{item.title}</p>
                      </Grid.Item>
                    })
                  }
                </Grid>
              </Swiper.Item>
            })
          }
        </Swiper>
      </div>
      <Grid border={false} columnNum={2}>
        {
          listArr.map((item, index) => {
            return <Grid.Item key={index} onClick={()=>navigate("/detail/"+item.id,{state:item})}>
              <Image src={item.img} />
              <p>{item.title}</p>
            </Grid.Item>
          })
        }
      </Grid>

    </div>
  )
}

const mapStateToProps = (state: ALLSTATE) => ({})

const mapDispatchToProps = (dispatch: Dispatch) => {
  return { ...bindActionCreators(Action, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Hoclogin(Index))
